<template>
 <div>
  <el-button type="primary" @click="handleExport()" class="button">导出</el-button>
  <el-table id="tableId" :data="sourceData" stripe style="width: 100%" max-height="800">
    <el-table-column align="center" label="序号" type="index" :index="indexMethod" width="80" />
    <el-table-column prop="username" label="姓名" width="120" />
    <el-table-column prop="mobile" label="手机号码" width="120" />
    <el-table-column prop="createTime" label="上报时间" width="120" >
      <template #default="scope">
        {{ getDateFormat(scope.row.createTime) }}
      </template>
      
    </el-table-column>
    <el-table-column prop="pic" label="图片" align="center" width="150">
        <template #default="scope">
            <el-image class="image" :src="baseUrl+scope.row.pic" fit="cover" 
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[baseUrl+scope.row.pic]"
            :preview-teleported="true">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
              </el-image>
        </template>
      
    </el-table-column>
    <el-table-column prop="video" label="视频" align="center" width="180" >
      <template #default="scope">
      <video controls width="150" height="150">
        <!-- MP4 文件 -->
        <source :src="baseUrl+scope.row.video" type="video/mp4" />
      </video>
 </template>
      </el-table-column>
      <el-table-column prop="address" label="隐患地点"  />
  </el-table>
  <div class="pager">
    <el-pagination
    style="transform: scale(1)"
      v-model:currentPage="pageNum"
      background
      layout="total, prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @current-change="pageChange"
    />
  </div>
  <!-- <el-button @click="exportExcel('interestTable.xlsx', '#tableId')">导出</el-button> -->
  
</div>

</template>

<script setup>
import { computed, ref } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import {getList} from '@/api/demo.js'
import moment from 'moment';
import { exportExcel, handleExportTableData } from "@/utils/export";

const pageSize = ref(10)

const pageNum = ref(0)

const tableData = ref([])

const total = ref(0)
const baseUrl = 'http://106.52.180.164:1080'

getTableData()

const handleExport= () => {
      let arrList = [];
      for (var i = 0; i < tableData.value.length; i++) {
        var needDownloadColumns = {
          姓名: tableData.value[i].username,
          手机号码: tableData.value[i].mobile,
          上报时间:getDateFormat(tableData.value[i].createTime),
          图片:baseUrl+tableData.value[i].pic,
          视频:baseUrl+tableData.value[i].video,
          隐患地点:tableData.value[i].address
        };
        arrList.push(needDownloadColumns);
      }
      handleExportTableData(arrList);
    }
const sourceData = computed(()=> {
  return tableData.value
})

function  getTableData(page) {
  const data = {
    page: pageNum.value,
    size: 10
  }
  const res = getList(data).then(res => {
    tableData.value  = res.list
    total.value = res.count
    console.log('res:', sourceData.value)
  })
}

function pageChange(curPage) {
  console.log('record index pageChange curPage:', curPage)
  pageNum.value = curPage
  getTableData(curPage)
}
const indexMethod = (index) => {
  return index + 1
}
const getDateFormat= (time) => {
  return moment(time*1000).format("YYYY-MM-DD")
}
</script>

<style scoped>
.pager{
  text-align: center; 
  margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.button {
  padding: 10px;
  width: 100px;
  position: float;
  float: right;
  
}
.image {
  display: flex;
  align-items: center;
  width: 100px;
  height: 100px;
}

</style>